<template>
  <div class="tooldepartment app-container" v-loading="loading">
    <el-container>
      <el-aside width="200px">
        <div class="pd-5">
          <el-input v-model="input1" placeholder="请输入关键词" :prefix-icon="Search" />
        </div>
        <div class="pd-5">
          <el-tree ref="treeRef" node-key="id" :data="state.data" :props="defaultProps" @node-click="handleNodeClick" default-expand-all :highlight-current="true" />
        </div>
      </el-aside>
      <el-main>
        <el-row class="box-right">
          <el-col :span="3" :offset="18" @click="onAdd"><el-button plain type="primary">新建下级机构</el-button> </el-col>
          <el-col :span="1" :offset="1" @click="onDelete"><el-button plain type="danger">删除</el-button> </el-col>
        </el-row>
        <div class="box-center">
          <el-form :model="form" label-width="120px">
            <el-form-item label="机构名称:">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="机构编码:">
              <el-input v-model="form.orgId" :disabled="isDisabled" />
            </el-form-item>
            <el-form-item label="上级机构:">
              <el-input v-model="form.orgPname" :disabled="isDisabled" />
            </el-form-item>
            <el-form-item label="机构地址:">
              <el-input v-model="form.orgAdd" />
            </el-form-item>
            <el-form-item label="核心机构号:">
              <el-input v-model="form.orgCore" :disabled="isDisabled" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSave">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup name="Gen">
import { Search } from "@element-plus/icons-vue";
import router from "@/router";
import { onMounted, reactive, ref } from "vue";
import { queryOrgTree, queryDetail, addOrg, delOrg, modify } from "@/api/org";
import { getAcconutList } from "@/api/role";
import { ElMessageBox, ElMessage, ElTree } from "element-plus";
import useUserStore from "@/store/modules/user";
import { getId } from "@/utils/auth";

const userStore = useUserStore();
const treeRef = ref();
const route = useRoute();
const loading = ref(false);
const isDisabled = ref(true);
const { proxy } = getCurrentInstance();
const input1 = ref("");
const form = reactive({
  name: "", //机构名称
  orgCore: "", //核心机构号
  orgPname: "", //上级机构
  id: getId(), //当前编号
  orgId: "", //当前机构号
  orgAdd: "", //当前机构地址
  orgPid: "", //当前上级机构编号
  type: "2", //1-新建2-编辑
  orgLevel: "", //当前机构级别
});

const state = reactive({
  data: [],
  list: [],
});

const defaultProps = {
  children: "childs",
  label: "orgName",
};

onMounted(() => {
  console.log(userStore, "userStore", getId());
});
//当前选中树节点
const setCheckedKeys = () => {
  console.log(form.id, "form.idform.idform.id");
  treeRef.value.setCurrentKey(form.id, true);
};

//查全部机构树
function getRoleList() {
  loading.value = true;
  queryOrgTree().then((res) => {
    console.log(res, "列表");
    state.data = res;
    loading.value = false;
    getAccount();
  });
}

//查询所属机构列表
function getAccount() {
  console.log(form.id, "form.id");
  getAcconutList(form.id).then((res) => {
    console.log(res, "ressssss");
    if (res.data.length > 0) {
      getDetail(res.data[0].id);
    }
  });
}

//查详细信息
function getDetail(id = 1) {
  queryDetail(id).then((res) => {
    console.log(res, "详细信息");
    if (res.code == "200") {
      form.name = res.data.orgName;
      form.orgId = res.data.orgId;
      form.orgPname = res.data.orgPname;
      form.orgAdd = res.data.orgAdd;
      form.orgCore = res.data.orgCore;
      form.id = res.data.id; //待处理
      setCheckedKeys();
    } else {
      ElMessage.error(res.msg);
    }
  });
}

// 树组件点击选中事件
const handleNodeClick = (data) => {
  console.log(data, "dddddddddd");
  form.name = data.orgName;
  form.orgCore = data.orgCore;
  form.orgPname = data.orgDesc;
  form.id = data.id;
  form.orgId = data.orgId;
  form.orgPname = data.orgPname;
  form.orgPid = data.orgPid;
  form.orgLevel = data.orgLevel;
  form.orgAdd = data.orgAdd;
};

//删除事件
function onDelete() {
  proxy.$modal.confirm("是否确认删除该机构？").then(function () {
    delOrg(form.id).then((res) => {
      form.name = "";
      form.orgId = "";
      form.orgAdd = "";
      form.orgPname = "";
      form.orgCore = "";
      form.id = getId();
      getRoleList();
    });
  });
}

// 新建下级机构
function onAdd() {
  if (form.orgLevel == 4) {
    ElMessage({
      message: "不允许新建机构",
      type: "warning",
    });
  } else {
    isDisabled.value = false;
    form.orgPname = form.name;
    form.name = "";
    form.orgId = "";
    form.type = "1";
    form.orgAdd = "";
    form.orgCore = "";
    form.orgLevel++;
  }
}

//保存
function onSave() {
  console.log("848494", form.type);
  if (form.type == "1") {
    addOrg(form).then((res) => {
      console.log("848494");
      if (res.code == 200) {
        getRoleList();
      } else {
        ElMessage.error(res.msg);
      }
    });
  } else {
    exit();
  }
}

// 编辑
function exit() {
  console.log(form, "formform");
  modify(form).then((res) => {
    console.log(res, "resbinaji");
    if (res.code == 200 && res.msg == "编辑成功") {
      getRoleList();
    } else {
      getRoleList();
      ElMessage.error(res.msg);
    }
  });
}

getRoleList();
</script>
<style lang="scss" scoped>
.headline {
  background-color: #f3f3f3;
  text-align: center;
  padding: 5px 0;
  span {
    display: block;
    padding-top: 5px;
  }
}
.mg {
  margin: 5px 0;
}
:deep(.el-aside) {
  margin: 0;
  padding: 0;
  border: 1px solid #dadbdc;
  background: #fff;
}
.title {
  height: 30px;
  line-height: 30px;
  background-color: #ebebeb;
  text-align: center;
}
.pd-5 {
  padding: 5px;
}
:deep(.el-main) {
  padding: 0;
}
.box-right {
  height: 50px;
  line-height: 50px;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;
}
.box-center {
  padding-top: 50px;
  padding-right: 300px;
  padding-left: 100px;
}
</style>
